<!DOCTYPE html>
<html xmlns:th="www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta name="description" content="大学生就业实训,品质就业,职业规划,IT行业人才基地" />
		<title>蜗牛书城(woniuxy.com)-正品低价、品质保障、配送及时、轻松购物！</title>

		<!-- 引入Bootstrap核心样式文件 -->
		<link th:href="@{/bootstrap-3.4.1/css/bootstrap.min.css}" rel="stylesheet">
		<!-- 引入jQuery核心js文件 -->
		<script th:src="@{/javascript/jQuery-1.12.4.js}"></script>
		<!-- 引入BootStrap核心js文件 -->
		<script th:src="@{/bootstrap-3.4.1/js/bootstrap.min.js}"></script>


		<link rel="shortcut icon" th:href="@{/favicon.ico}" />
		<link th:href="@{/css/common.css}" rel="stylesheet" />
		<link th:href="@{/css/top.css}" rel="stylesheet" />
		<link th:href="@{/css/foot.css}" rel="stylesheet" />

		<!-- 订单页和购物车类似，所以需要购物车的样式 -->
		<link th:href="@{/css/cart.css}" rel="stylesheet" />
		<link th:href="@{/css/order.css}" rel="stylesheet" />
		<script th:src="@{/javascript/order.js}"></script>
	</head>

	<body>
		<!--  最顶部的导航栏 -->
		<div th:replace="~{common::top}"></div>
		<!--  =================== head =============================== -->
		<div class="head">
			<div class="container">
				<!-- ============= logo ============= -->
				<div class="logo fl">
					<h1>
						<a class="hot-word">蜗牛学苑</a>
					</h1>
				</div>
				<!-- ============= 搜索框部份 ============= -->
				<div class="search fl ml100">
					<div class="up">
						<div class="search-box fl mr18">
							<input class="fl" type="text" value="请输入搜索关键字" />
							<span class="photo">&#xe663;</span>
							<span class="search-icon fl">&#xe660;</span>
						</div>

						<div class="cart fl">
							<span class="iconfont">&#xe622;</span>
							<a href="/cart/showCart">我的购物车</a>
							<i class="num">0</i>
						</div>
					</div>

					<div class="navitems">
						<ol>
							<li><a class="red-and-weight" href="#">秒杀</a></li>
							<li><a class="red-and-weight" href="#">优惠券</a></li>
							<li><a href="#">程序设计</a></li>
							<li><a href="#">数据库</a></li>
							<li><a href="#">网络与数据通信</a></li>
							<li><a href="#">科普读物</a></li>
							<li><a href="#">建筑学</a></li>
						</ol>
					</div>

				</div>
			</div>
		</div>

		<!-- ==================== 订单页 ==================== -->
		<div class="container no-padding book-detail-bg">
		</div>

		<div class="index mt50">
			<div class="container no-padding">
				<span class="cart-name">订单结算页：</span>
			</div>
		</div>
		
		<div class="container no-padding">
			
			<div class="address" id="address">
				<p>收货人信息：</p>
<!--				<div class="user-address" onclick="checkAddress(this)">-->
<!--					-->
<!--				</div>-->
			</div>


			<table class="table mt10" >
				<tr>
					<td>
						<input id="orderId" type="text" name="orderId" th:value="${orderVo.orderId}" hidden="hidden">
						<div class="checkbox">
							书籍封面
						</div>
					</td>
					<td>
						<div class="checkbox">
							书籍名称
						</div>
					</td>
					<td>
						<div class="checkbox">
							单价
						</div>
					</td>
					<td>
						<div class="checkbox">
							数量
						</div>
					</td>
					<td>
						<div class="checkbox">
							小计
						</div>
					</td>
				</tr>

				<tr th:each="item : ${orderVo.list}">
					<td>
						<div class="checkbox">
							<img th:src="@{|http://192.168.146.10:8099${item.bookImg}|}" />
						</div>
					</td>
					<td>
						<div class="checkbox">
							<span th:text="${item.bookName}"></span>
						</div>
					</td>
					<td>
						<div class="checkbox">
							<span th:text="${item.bookPrice}"></span>
						</div>
					</td>
					<td>
						<div class="checkbox">
							<span th:text="${item.buyCount}"></span>
						</div>
					</td>
					<td>
						<div class="checkbox">
							<span th:text="${item.subTotal}"></span>
						</div>
					</td>
				</tr>
				
				<tr id="last-tr">
					<td colspan="7" class="no-padding">
						
						<a href="#" class="buy btn btn-danger fr ml10" onclick="toPay()">
							去付款
						</a>
						<span class="fr ">合计 : <i class="total" th:text="${orderVo.total}" id="total">0</i> 元</span>

					</td>
				</tr>
			</table>
		</div>
		<!-- =============== 最后的网站底部 =============== -->
		<div th:replace="~{common::footer}"></div>
	</body>
	
	<script>
		//付款页面
		function toPay(){
			// 创建支付的链接
			let url = "/alipay/pay?"
					+"orderId="+ $("#orderId").val()
					+"&total="+ $("#total").html()
					+"&name=书籍订单" ;
			// 发送请求
			location.href = url;
		}
		
		// 就是选中当前的地址，并把地址变红色，选中状态
		function checkAddress(obj){
			$(".user-address").removeClass("active");
			$(obj).addClass("active");
			
			let addressId = $(obj).find("input[name=addressId]").val();
			console.log(addressId);
			
			$.ajax({
				url:"/address/changeAddress",
				type:"post",
                data:{
					"orderId": $("#orderId").val(),
					"addressId": addressId,
				},
				success:function(data){
					console.log(data);
				}
			})
		}
	</script>
	
	
</html>
